<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hope2</title>
    <link rel="stylesheet" href="https://lib.baomitu.com/bulma/0.9.1/css/bulma.css">
    <link rel="shortcut icon" href="/favicon.ico">
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.hcharts.cn/highstock/highstock.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://cdn.hcharts.cn/plugins/highcharts-zh_CN.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/modules/drag-panes.js"></script>
    <script type="text/javascript">
        var seriesOptions = [];
        var profitChart;
        var stockOptions = {
            chart: {
                zoomType: null,
                // pinchType: null
            },
            rangeSelector: {
                selected: 4
            },
            yAxis: {
                labels: {
                    formatter: function () {
                        return (this.value > 0 ? ' + ' : '') + this.value + '%';
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 2,
                    color: 'silver'
                }]
            },
            plotOptions: {
                series: {
                    compare: 'percent',
                    showInNavigator: true
                }
            },
            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                valueDecimals: 2,
                followTouchMove: false,
                split: true
            },
            series: seriesOptions
        };
        var link = 'http://127.0.0.1:8003/etf-compare?days=';
        link = '/etf-compare?days=';
        $(document).ready(function () {
            post();
        });

        function post() {
            var days = $("#days").val();
            var linkNew = link + days;
            $.getJSON(linkNew, function (data) {
                // As we're loading the data asynchronously, we don't know what order it will arrive. So
                // we keep a counter and create the chart when all the data is loaded.
                createChart(data);
                refreshVisible();
            });
        }

        /**
         * Create the chart when all data is loaded
         * @returns {undefined}
         */
        function createChart(data) {
            stockOptions.series = data;
            profitChart = Highcharts.stockChart('profit-container', stockOptions);
        }


        function refreshVisible() {
            $("input[name='etfCheckBox']").each(function (i, box) {
                checkboxOnclick(box.id, box.checked);
            });
        }

        function checkboxOnclick(checkboxId, selected) {
            $.each(stockOptions.series, function (i, etf) {
                if (etf.code == checkboxId) {
                    profitChart.series[i].setVisible(selected);
                }
            });
        }
    </script>
</head>


<body class="layout-default">
<nav id="navbar" class="bd-navbar navbar has-shadow is-spaced">
    <div class="container">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://qianyitian.com/">
                <img style="height:36px;width:36px;" src="https://img.qianyitian.com/icon/logo.png">  <h4
                    class="title is-3">Hope2</h4>
            </a>
        </div>
    </div>
</nav>

<section class="section">
    <div class="container">
        <div class="columns">
            <div class="column is-3">
                <div class="field">
                    <label class="label">计算最近多少周的数据</label>
                    <div class="control">
                        <input id="days" class="input" type="text" name="days" value="40">
                    </div>
                </div>
                <div class="field is-grouped">
                    <div class="control">
                        <button class="button is-link" onclick="post()">Submit</button>
                    </div>
                </div>
            </div>
            <div class="column is-1">
            </div>
            <div class="column is-2">
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="515220" name="etfCheckBox" type="checkbox" checked=“checked”
                                       onclick="checkboxOnclick('515220',this.checked)">
                                煤炭ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="512880" name="etfCheckBox" type="checkbox" checked=“checked”
                                       onclick="checkboxOnclick('512880',this.checked)">
                                证券ETF
                            </label>
                        </div>
                    </div>
                </div>

                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="159865" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('159865',this.checked)">
                                养殖ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="512660" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('512660',this.checked)">
                                军工ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="512290" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('512290',this.checked)">
                                生物医药ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="512720" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('512720',this.checked)">
                                计算机ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="515880" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('515880',this.checked)">
                                通信ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="510230" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('510230',this.checked)">
                                金融ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="159996" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('159996',this.checked)">
                                家电ETF
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="column is-2">
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="515210" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('515210',this.checked)">
                                钢铁ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="515170" name="etfCheckBox" type="checkbox" checked=“checked”
                                       onclick="checkboxOnclick('515170',this.checked)">
                                食品饮料ETF
                            </label>
                        </div>
                    </div>
                </div>

                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="159967" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('159967',this.checked)">
                                创成长ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="512760" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('512760',this.checked)">
                                芯片ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="512170" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('512170',this.checked)">
                                医疗ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="516020" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('516020',this.checked)">
                                化工ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="512800" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('512800',this.checked)">
                                银行ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="515000" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('515000',this.checked)">
                                科技ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="515260" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('515260',this.checked)">
                                电子ETF
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="column is-2">
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="516800" name="etfCheckBox" type="checkbox" checked=“checked”
                                       onclick="checkboxOnclick('516800',this.checked)">
                                智能制造ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="515790" name="etfCheckBox" type="checkbox" checked=“checked”
                                       onclick="checkboxOnclick('515790',this.checked)">
                                光伏ETF
                            </label>
                        </div>
                    </div>
                </div>

                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="512580" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('512580',this.checked)">
                                环保ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="512400" name="etfCheckBox" type="checkbox" checked=“checked”
                                       onclick="checkboxOnclick('512400',this.checked)">
                                有色金属ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="515030" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('515030',this.checked)">
                                新能源车ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="512200" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('512200',this.checked)">
                                房地产ETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="515050" name="etfCheckBox" type="checkbox"
                                       onclick="checkboxOnclick('515050',this.checked)">
                                5GETF
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="512690" name="etfCheckBox" type="checkbox" checked=“checked”
                                       onclick="checkboxOnclick('512690',this.checked)">
                                酒ETF
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<hr>
<section class="section">
    <div class="container">
        <div id="container"></div>
    </div>
</section>

<section class="section">
    <div class="container">
        <div id="profit-container" style="min-width:600px;height:1000px"></div>
    </div>
</section>

<hr>
</body>
</html>
